<script setup lang="ts">
import {
    NButton, NDrawer, NDrawerContent, NTransfer, NFlex, NCollapse,
    NCollapseItem, NIcon
} from 'naive-ui';

import { useFeature } from "~/common/mixins/";
import { type SysUserGroup } from '@/apis/models';
import { reactive } from 'vue';
import { WarningFilled } from '@vicons/carbon';

import { useMessage } from "naive-ui";
let root = "usergroup";
let message = useMessage();

let emits = defineEmits(["handleQuery"])

let state = reactive({
    showModal: false,
    curUserGroup: {} as SysUserGroup,
    userTransferValue: [] as any[],
    userTransfers: [] as any[]

})

import { useUserGroupStore, useUserStore } from "@/store";
let userGroupStore = useUserGroupStore();
let userStore = useUserStore();

let onSubmit = (e: MouseEvent) => {
    if (state.userTransferValue.length < 1) {
        message.error("请选选择用户");
        return;
    }
    e.preventDefault()
    UpdateOne(userGroupStore, {}).then((res: any) => {
        if (res.code == 200) {
            message.success("数据修改成功");
            state.showModal = false;
            closeDialog()
        }
    })
}

let { UpdateOne, LoadList } = useFeature()

function openDialog(row: any) {
    state.curUserGroup = row.curUserGroup
    state.showModal = true;
    LoadUser();
}

let closeDialog = () => {
    emits('handleQuery');
    state.showModal = false;
}

let LoadUser = () => {
    state.userTransfers = [];
    LoadList(userStore, {
        "ne_fdUsername": 'admin'
    }).then((res: any) => {
        for (let i = 0; i < res.length; i++) {
            let it = res[i];
            state.userTransfers.push({
                label: it.fdFullname + " - " + it.fdPhone,
                value: it.fdId
            })
        }
    })
}

defineExpose({ openDialog });
</script>

<template>
    <div class="mc_1">
        <n-drawer v-model:show="state.showModal" :width="502" placement="right">
            <n-drawer-content title="添加组成员">
                <div class="notify">
                    <NIcon style="margin-right:5px;" color="royalblue">
                        <WarningFilled />
                    </NIcon>
                    用户加入到用户组后，将拥有该组所有权限。
                </div>
                <n-collapse :default-expanded-names="['1', '2']">
                    <n-collapse-item title="用户组" name="1" disabled>
                        <n-flex :wrap="false" style="background-color:rgb(250,250,252);">
                            <div class="cdl item">用户组名称</div>
                            <div class="cdl item">用户组备注</div>
                        </n-flex>
                        <n-flex :wrap="false">
                            <div class="cdl"> {{ state.curUserGroup.fdName }}</div>
                            <div class="cdl">{{ state.curUserGroup.fdDescription }}</div>
                        </n-flex>
                    </n-collapse-item>
                    <n-collapse-item title="用户" name="2">
                        <div>
                            <n-transfer v-model:value="state.userTransferValue" :options="state.userTransfers" />
                        </div>
                    </n-collapse-item>
                </n-collapse>

                <template #footer>
                    <n-button type="primary" @click="onSubmit"
                        :disabled="state.userTransferValue?.length < 1">确定</n-button>
                    &emsp;
                    <n-button type="tertiary">取消</n-button>
                </template>
            </n-drawer-content>
        </n-drawer>
    </div>

</template>

<style scoped>
.cdl {
    width: 50%;
    height: 30px;
    line-height: 30px;
    text-indent: 10px;
}


.item {
    height: 40px;
    line-height: 40px;
}

.notify {
    height: 30px;
    background-color: rgb(250, 250, 252);
    text-indent: 10px;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    flex-flow: row;
    align-items: center;
}
</style>
